<extend name="Public/base" />

<block name="style">
<style>
    .dragsort {
        width:400px;
    }
</style>
</block>

<block name="body">
	<!-- 标题栏 -->
	<div class="main-title cf">
		<h2><present name="data">编辑<else />新增</present>钩子</h2>
	</div>
    
<div class="panel panel-default">
    <div class="panel-heading">
        <present name="data">编辑<else />新增</present>
    </div>
    
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-6">
                <!-- 表单 -->
                <form action="{:U('updateHook')}" method="post" class="form" role="form" >
                    <div class="form-group">
                        <label class="item-label">钩子名称<span class="check-tips">（需要在程序中先添加钩子，否则无效）</span></label> 
                        <input type="text" value="{$data.name}" name="name" class="form-control">		 
                    </div>
                    <div class="form-group">
                        <label class="item-label">钩子描述<span class="check-tips">（钩子的描述信息）</span></label>	 
                         <textarea name="description" class="form-control">{$data.description}</textarea>	 
                    </div>
                    <div class="form-group">
                        <label class="item-label">钩子类型<span class="check-tips">（区分钩子的主要用途）</span></label>		 
                        <select name="type" class="form-control" >
                            <volist name=":C('HOOKS_TYPE')" id="vo">
                                <option value="{$key}" <eq name="data.type" value="$key"> selected</eq>>{$vo}</option>
                            </volist>
                        </select>			 
                    </div>
                    <present name="data">
                    <div class="form-group">
                        <label class="item-label">钩子挂载的插件排序<span class="check-tips">（拖动后保存顺序，影响同一个钩子挂载的插件执行先后顺序）</span></label>		 
                        <input type="hidden" name="addons" value="{$data.addons}" readonly>
                        <empty name="data.addons">
                            暂无插件，无法排序
                        <else />
                        <ul id="sortUl" class="dragsort">
                            <volist name=":explode(',',$data['addons'])" id="addons_vo">
                                <li class="getSort"><b>&times;</b><em>{$addons_vo}</em></li>
                            </volist>
                        </ul>
                        <script type="text/javascript">
                            $(function(){
                                $("#sortUl").dragsort({
                                    dragSelector:'li',
                                    placeHolderTemplate: '<li class="draging-place">&nbsp;</li>',
                                    dragEnd:function(){
                                        updateVal();
                                    }
                                });

                                $('#sortUl li b').click(function(){
                                    $(this).parent().remove();
                                    updateVal();
                                });

                                // 更新排序后的隐藏域的值
                                function updateVal() {
                                    var sortVal = [];
                                    $('#sortUl li').each(function(){
                                        sortVal.push($('em',this).text());
                                    });
                                    $("input[name='addons']").val(sortVal.join(','));
                                }
                            })
                        </script>
                        </empty>
                     
                    </div>
                    </present>
                    <div class="form-group">
                        <input type="hidden" name="id" value="{$data.id}">
                        <button type="submit" class="btn btn-default submit-btn ajax-post" target-form="form">确 定</button>
                        <button class="btn btn-default btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
                    </div>
                </form>
            </div><!-- /.col-lg-6 (nested) -->
        </div><!-- /.row (nested) -->
    </div><!-- /.panel-body -->
</div><!-- /.panel -->
</block>

<block name="script">
<present name="data">
    <script type="text/javascript" src="__STATIC__/jquery.dragsort-0.5.1.min.js"></script>
</present>

<script type="text/javascript">
$(function(){
    //导航高亮
    highlight_subnav('{:U('Addons/hooks')}');
})
</script>
</block>